<template>
  <view class="order-card">
    <view class="top">
      <view class="left-part">
        <view class="date">{{ order.visitDate }}</view>
        <view class="time">{{ order.visitTime }}</view>
      </view>

      <view class="right-part">
        <text class="text">{{ order.status }}</text>
        <view class="delete-button" @click="deleteOrder" v-if="couldDelete">
          <uni-icons
            color="grey"
            class="uni-icon"
            size="20"
            type="clear"
          ></uni-icons>
        </view>
      </view>
    </view>

    <house-man v-if="USER_ORIENTED" :person="order.merchants"> </house-man>

    <!--    招商端用户卡片 start -->
    <user-card
      v-else
      :person="order.users"
      :user-named="order.named"
      :house-item="order.house"
    ></user-card>
    <!--    招商端用户卡片 end -->

    <!--    用户端  -->
    <s-house-card
      :order-status="order.status"
      :off-shelf="offShelf"
      :tag-value="tagName"
      :item="order.house"
    ></s-house-card>

    <!--     用户端操作START -->
    <view class="operations" v-if="USER_ORIENTED && !offShelf">
      <view
        v-if="order.status === '已预约' || order.status === '待预约'"
        class="bottom-button"
        @click="toCancelAppointment(order)"
        >取消预约
      </view>
      <view
        v-else-if="order.status === '已取消' || order.status === '取消中'"
        class="bottom-button"
        @click="toRecover(order)"
      >
        恢复预约</view
      >
    </view>
    <!--     用户端操作END -->

    <!--    招商端操作 -->
    <view class="operations" v-if="!USER_ORIENTED && !offShelf">
      <view
        v-if="order.status === '待预约'"
        class="bottom-button"
        @click="toConfirmAppointment(order)"
      >
        确定预约
      </view>
      <view
        v-else-if="order.status === '恢复中'"
        class="bottom-button"
        @click="toRecover(order)"
      >
        确定恢复
      </view>
      <view
        v-else-if="order.status === '取消中'"
        class="bottom-button"
        @click="confirmCancel(order)"
      >
        确定取消
      </view>
      <view
        v-else-if="order.status === '已预约'"
        class="bottom-button"
        @click="confirmComplete(order)"
      >
        完成带看
      </view>
    </view>
  </view>
</template>

<script>
import houseMan from '../displayDetails/houseMan';
import userCard from './userCard';
import sHouseCard from '../../components/sHouseCard';
import { USER_ORIENTED } from '../../util/config';
import { TESTING } from '../../util/test';

export default {
  components: {
    houseMan,
    sHouseCard,
    userCard,
  },
  computed: {
    orderStatus() {
      return this.order.status;
    },
    offShelf() {
      return this.order.is_out === 1;
    },
    // 是否有删除功能
    couldDelete() {
      const deleteArr = ['已完成', '已失效', '已取消'];
      return deleteArr.includes(this.order.status);
    },
  },
  data() {
    return {
      // 需要更改数据
      orderData: {},
      USER_ORIENTED: USER_ORIENTED,
      TESTING: TESTING,
    };
  },
  methods: {
    deleteOrder() {
      this.$emit('toDeleteOrder');
    },
    toCancelAppointment(order) {
      this.$emit('toCancel', order);
    },
    toRecover(order) {
      this.$emit('toRecover', order);
    },
    confirmComplete(order) {
      this.$emit('confirmComplete', order);
    },
    confirmCancel(order) {
      this.$emit('toConfirmCancel', order);
    },
    toConfirmAppointment(order) {
      // console.log('order: ',order);
      // return
      this.$emit('toConfirmAppointment', order);
    },
  },
  props: {
    order: {
      type: Object,
      default() {
        return {
          users: {},
          visitDate: '',
          is_out: 0,
          // 订单在原数组中的位置
          orderIndex: -1,
        };
      },
    },
    tagName: {
      // 传给houseCard
      type: String,
    },
  },
  async mounted() {
    // console.log(this.order);
    this.orderData = this.order
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';

.order-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 600rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx 32rpx;
  font-size: 28rpx;

  .top {
    @include center;
    justify-content: space-between;
    height: 78rpx;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid $greyBorderColor;
    @include borderBox;

    .left-part {
      display: flex;
      align-items: center;

      .date {
        max-width: 130rpx;
        height: 40rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        letter-spacing: 0rpx;
        color: #06121f;
        margin-right: 8rpx;
      }

      .time {
        height: 40rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #7d7e80;
      }
    }

    .right-part {
      display: flex;

      .text {
        @include center;
        color: white;
        width: 136rpx;
        height: 52rpx;
        background-color: #ba9d61;
        border-radius: 3vw 4rpx 3vw 4rpx;
        font-size: 24rpx;
      }
      .delete-button {
        @include center;
        margin-left: 12rpx;
        /*position: absolute;*/
        right: -5rpx;
      }
    }
  }

  .person {
    height: 126rpx;
    @include center;
    justify-content: space-between;
    flex-direction: row;

    .person-info {
      @include center;
      padding-left: 10px;
      width: 220rpx;
      justify-content: flex-start;
      /*justify-content: space-between !important;*/

      .profile {
        width: 68rpx;
        height: 68rpx;
        background-color: #d8d8d8;
        border-radius: 50%;
        @include cover-no-repeat-center;
      }

      .name-title {
        padding-top: 5px;
        margin-left: 10px;
        max-width: 170rpx;
        @include center;
        flex-direction: column;
        .name {
          margin-bottom: 3px;
          width: 28px;
          height: 16px;
          font-family: PingFangSC-Medium;
          font-size: 14px;
          line-height: 16px;
          letter-spacing: 0px;
          color: #06121f;
        }

        .title {
          width: 36px;
          height: 20px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          line-height: 20px;
          letter-spacing: 0px;
          color: #969799;
          font-weight: normal;
        }
      }
    }

    .contact {
      width: 180rpx;
      @include center;
      justify-content: space-between;

      .message,
      .phone {
        width: 68rpx;
        height: 68rpx;
        @include cover-no-repeat-center;
        background-image: url('../../static/images/convention/message@3x.png');
      }

      .phone {
        background-image: url('../../static/images/convention/phone@3x.png');
      }
    }
  }

  .bottom-button {
    width: 688rpx;
    height: 68rpx;
    background-color: #ebedf0;
    border-radius: 42rpx;
    @include center;
    color: #7d7e80;
    font-size: 24rpx;
    &:active {
      background-color: whitesmoke;
    }
  }
}
</style>
